<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ONESTAR-搜索结果</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
    <script src="../static/js/jquery-3.4.1.min.js" th:href="@{/js/jquery-3.4.1.min.js}"></script>
    <script src="../static/js/bootstrap.js" th:href="@{/js/bootstrap.js}"></script>
    <link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <style type="text/css">
        .showImage{
            margin-left: 20px;
            margin-top:50px;
        }

        .block{
            position: relative;
            margin-left: 20px;
            margin-top:50px;
        }
        .photo_time{
            color: red;
        }
        .address{
            color: red;
        }
    </style>

</head>
<body>
<!--  导航栏-->
<nav class="navbar navbar-inverse center-block" style="margin-bottom: 100px;"  >
    <div class="container " style="width:800px; margin:0 auto;">
        <!--      图标-->
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img alt="图标" width="20px" height="20px" src="../static/images/tb.jpg" th:src="@{images/tb.jpg}">
            </a>
        </div>
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header ">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" th:href="@{/index}">首页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#" >分类 <span class="sr-only">(current)</span></a></li>
                <li><a href="#" >留言</a></li>
                <li><a href="#" th:href="@{/resource}">资源</a></li>
                <li><a href="#" th:href="@{/image}">照片</a></li>
                <li><a href="#" >我</a></li>
            </ul>
            <!--</div>-->
            <form class="navbar-form navbar-right" action="#" th:action="@{/search}" method="post">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search" name="query">
                </div>
                <button type="submit" class="btn btn-default" onclick="document.forms['search'].submit()">查询</button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div>
    <!--中间内容-->
    <div class="content">
        <div class="container">
            <!--header-->

            <div class="ui top attached segment">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <div class="btn-group btn-group-lg" role="group" aria-label="...">
                            <a th:href="@{/image}"> <button type="button" class="btn btn-default " >全部</button></a>
                            <a th:href="@{/image/0}"><button type="button" class="btn btn-default " >今天</button></a>
                            <a th:href="@{/image/1}"><button type="button" class="btn btn-default " >昨天</button></a>
                            <a th:href="@{/image/30}"><button type="button" class="btn btn-default " >一月内</button></a>
                            <a th:href="@{/image/182}"><button type="button" class="btn btn-default " >半年内</button></a>
                            <a th:href="@{/image/365}"><button type="button" class="btn btn-default " >一年内</button></a>
                        </div>
                    </div>
                    <div class="right aligned column">
                        共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${pageInfo.total}"> 14 </h2> 个
                    </div>
                </div>
            </div>
            <dic class="block col-lg-5 col-sm-5 "  th:each="images : ${pageInfo.list}">
<!--          图片描述-->
                <img  class="img-responsive  showImage" alt="Responsive image"   src="../static/images/slide1.jpg" th:src="@{${images.src}}">
            </dic>


            分页
            <div class="ui bottom attached segment m-opacity stackable grid">
                <div class="three wide column" align="center">
                    <a class="item" th:href="@{/search(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">上一页</a>
                </div>

                <div class="ten wide column" align="center">
                    <p> <span th:text="${pageInfo.pageNum}" th:unless="${pageInfo.hasNextPage}"></span> / <span th:text="${pageInfo.pages}"></span> </p>
                </div>

                <div class="three wide column" align="center">
                    <a class="item" th:href="@{/search(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">下一页</a>
                </div>
            </div>

        </div>


    </div>

</div>
<br>
<br>
<!--&lt;!&ndash;底部栏&ndash;&gt;-->
<!--<footer class="ui inverted vertical segment m-padded-tb-massive m-opacity" >-->
<!--    &lt;!&ndash;容器&ndash;&gt;-->
<!--    <div class="ui center aligned container">-->
<!--        <div class="ui inverted divided stackable grid">-->
<!--            <div class="four wide column">-->
<!--                <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced m-margin-top-max" >联系我</div>-->
<!--                &lt;!&ndash;<div id="newblog-container">&ndash;&gt;-->
<!--                &lt;!&ndash;<div class="ui inverted link list" th:fragment="newblogList">&ndash;&gt;-->
<!--                &lt;!&ndash;<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">最新文章</a>&ndash;&gt;-->
<!--                &lt;!&ndash;</div>&ndash;&gt;-->
<!--                &lt;!&ndash;</div>&ndash;&gt;-->
<!--                <div class="ui inverted link list">-->
<!--                    <div href="#" class="m-text-thin">...........</div>-->
<!--                    <div href="#" class="m-text-thin">...........</div>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="four wide column" >-->
<!--                <div class="ui inverted link list">-->
<!--                    <div class="item">-->
<!--                        &lt;!&ndash;微信二维码&ndash;&gt;-->
<!--                        <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >关注公众号</div>-->
<!--&lt;!&ndash;                        <img src="../static/images/oneStar.jpg" th:src="@{/images/oneStar.jpg}"  class="ui m-margin-top rounded image" alt="" style="width: 110px">&ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="four wide column">-->
<!--                <div class="ui inverted link list">-->
<!--                    <div class="item">-->
<!--                        &lt;!&ndash;微信二维码&ndash;&gt;-->
<!--                        <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >问题交流（QQ群）</div>-->
<!--&lt;!&ndash;                        <img src="../static/images/QQ-question.jpg" th:src="@{/images/QQ-question.jpg}"  class="ui m-margin-top rounded image" alt="" style="width: 110px">&ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            &lt;!&ndash;博客运行时间统计&ndash;&gt;-->
<!--            <div class="four wide column">-->
<!--                <div style="font-size: large;font-weight: bold" class="ui inverted  m-text-thin m-text-spaced m-margin-top">客栈信息</div>-->
<!--                &lt;!&ndash;<p id="htmer_time" class="item m-text-thin"></p>&ndash;&gt;-->
<!--                <div id="blog-message">-->
<!--                    <div class="ui inverted link list" style="align-content: center;margin-top: 10px" th:fragment="blogMessage">-->
<!--                        <div class="m-text-thin" style="text-align: left;margin-left: 75px;">-->
<!--                            文章总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogTotal}"> 14 </h2> 篇-->
<!--                        </div>-->
<!--                        <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--                            访问总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogViewTotal}"> 14 </h2> 次-->
<!--                        </div>-->
<!--                        <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--                            评论总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogCommentTotal}"> 14 </h2> 条-->
<!--                        </div>-->
<!--                        <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--                            留言总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogMessageTotal}"> 14 </h2> 条-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="ui inverted section divider"></div>-->
<!--        <div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">我的客栈已营业：<span id="htmer_time" class="item m-text-thin"></span> (*๓´╰╯`๓)</div>-->
<!--        <a rel="nofollow" href="http://www.beian.miit.gov.cn" target="_blank">..............</a>-->
<!--    </div>-->
<!--    </div>-->

<!--</footer>-->

</body>
</html>